<template>
	<div class="colBox">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar title="ETH  转账" left-text left-arrow @click-left="$router.back()" @click-right="$router.push()">
					<van-icon slot="right" name="scan" />
				</van-nav-bar>

				<div class="eth">
					<div class="ethTop">
						<div style="font-weight: 700;">ETH</div>
						<div style="color:#2295f3;font-size: 14px;font-weight: 700;">
							余额：<span>0</span>
							<span>ETH</span>
						</div>
					</div>
					<div class="ethbtn">
						<van-cell-group>
							<van-field v-model="value" placeholder="请输入金额" />
						</van-cell-group>
					</div>
				</div>

				<div class="address">
					<div class="addFirst">
						<div style="font-weight: 700;">收款地址</div>
						<!-- <van-icon class="addicon" name="description" size="20" style="color:#2295f3;" /> -->
						<img src="../../assets/images/benzi_03.png" alt="">
					</div>
					<div class="addValu">
						<van-cell-group>
							<van-field v-model="value1" placeholder="请输入以太坊地址或ENS域名" />
						</van-cell-group>
					</div>
					<div class="addfoot">
						<van-cell-group>
							<div class="beizhu" style="font-weight: 700;">备注</div>
							<van-field v-model="value2" placeholder="(选填)" />
						</van-cell-group>
					</div>
				</div>

				<!-- 费用 -->
				<div class="cost" v-if="!checked">
					<div class="costTop">
						<div class="feiLeft" style="font-weight: 700;">旷工费用</div>
						<div class="feiRight">
							<span>0.000215</span>&nbsp;<span>ether</span>&nbsp;<span>≈</span><span>￥</span><span>0.27</span>
							<img src="../../assets/images/ethXia_03.png" alt="">
						</div>
					</div>

					<div class="silderCenter">
						<img style="flex:1;margin-right:10px;" src="../../assets/images/wugui_03.png" alt />
						<van-slider style="flex:8" v-model="value3" @change="onChange" />
						<img style="flex:1;margin-left:10px;" src="../../assets/images/tuzi_03.png" alt />
					</div>
					<div class="gwei">
						<span>{{ value3 }}</span> &nbsp;
						<span>gwei</span>
					</div>
					<div class="advanced">
						<span>高级模式</span>&nbsp;&nbsp;&nbsp;
						<van-switch v-model="checked" size="24px" />
					</div>
				</div>

				<!-- 费用 -->
				<div class="cost" v-else>
					<div class="costTop">
						<div class="feiLeft" style="font-weight: 700;">旷工费用</div>
						<div class="feiRight">
							<span>0.000215</span>&nbsp;<span>ether</span>&nbsp;<span>≈</span><span>￥</span><span>0.27</span>
							<img src="../../assets/images/ethXia_03.png" alt="">
						</div>
					</div>

					<!-- <div class="silderCenter">
        <img style="flex:1;margin-right:10px;" src="../../assets/images/wugui_03.png" alt />
        <van-slider style="flex:8" v-model="value3" @change="onChange" />
        <img style="flex:1;margin-left:10px;" src="../../assets/images/tuzi_03.png" alt />
      </div>-->

					<!-- <div class="gwei"><span>10.00</span> &nbsp;<span>gwei</span></div> -->
					<div class="gas">
						<span>10.00</span>
						<span>gwei</span>
					</div>
					<div class="gas">
						<span>10.00</span>
						<span>gas</span>
					</div>
					<div class="jinZhi">
						<van-cell-group>
							<van-field v-model="value1" placeholder="十六进制的数据" />
						</van-cell-group>
					</div>
					<div class="advanced">
						<span>高级模式</span>&nbsp;&nbsp;&nbsp;
						<van-switch v-model="checked" size="24px" />
					</div>
				</div>

				<!-- 按钮 -->
				<div class="btn">
					<van-button type="info">下一步</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value3: 10,
				checked: true,
				gwei: '',
			};
		},
		methods: {
			onChange(value) {
				// this.$toast("当前值：" + value);
				this.gwei = value
			}
		}
	};
</script>

<style lang="less" scoped>
	.van-nav-bar {
		background-color: #fbfcfd;
		.van-nav-bar__title {
			font-size: 15px;
			color: #333333;
			font-weight: 700;
		}
		.van-icon {
			font-size: 18px;
			color: #333333 !important;
		}
	}
	
	.colBox {
		background-color: #f2f4f5;
		height: 100%;
	}
	
	html {
		background-color: #f2f4f5;
	}
	
	.van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border-width: 0 0;
	}
	
	.van-nav-bar__left,
	.van-nav-bar__right {
		font-size: 20px;
	}
	
	.eth {
		margin-bottom: 10px;
		padding-left: 18px;
		padding-right: 13px;
		background-color: #fff;
		.ethTop {
			display: flex;
			justify-content: space-between;
			height: 40px;
			align-items: center;
		}
		.ethbtn {
			.van-cell {
				padding: 2px 0 10px;
				line-height: 35px;
				font-size: 20px;
			}
		}
	}
	
	.address {
		margin-bottom: 10px;
		padding-left: 18px;
		padding-right: 13px;
		background-color: #fff;
		.addFirst {
			padding-top: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			img {
				display: inline-block;
				width: 16px;
			}
			.van-icon {
				color: #2295f3;
			}
		}
		.addValu {
			border-bottom: 1px solid #ebedf0;
			.van-cell {
				padding: 5px 0;
				// line-height: 35px;
			}
		}
		.addfoot {
			.van-cell-group {
				display: flex;
				align-items: center;
				.van-cell {
					padding: 10px 5px;
					line-height: 35px;
				}
			}
			.beizhu {
				width: 40px;
			}
		}
	}
	
	// 费用
	.cost {
		// height: 250px;
		padding-left: 18px;
		padding-right: 13px;
		background-color: #fff;
		.costTop {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.feiLeft {
				font-size: 14px;
			}
			.feiRight {
				font-size: 14px;
				color: #2295f3;
			}
			img {
				display: inline-block;
				width: 12px;
			}
		}
		.silderCenter {
			margin-top: 15px;
			height: 50px;
			display: flex;
			align-items: center;
			img {
				width: 30px;
			}
		}
		.gwei {
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 13px;
			color: #999999;
			margin-bottom: 20px;
		}
		.advanced {
			height: 50px;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #999999;
			padding-bottom: 10px;
		}
		.gas {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebedf0;
		}
		.jinZhi {
			height: 75px;
			border: 1px solid #ebedf0;
			margin-top: 10px;
			.van-cell {
				padding: 0px 10px;
				line-height: 35px;
				.van-field__control {
					height: 75px;
				}
			}
		}
	}
	
	//按钮
	.btn {
		padding-left: 18px;
		padding-right: 13px;
		margin-top: 20px;
		height: 60px;
		background-color: #f2f4f5;
		.van-button {
			width: 100%;
			border-radius: 5px;
			background-color: #c2c8cc;
			border: 0;
		}
	}
</style>